{% extends "mturk/base_fixed.html" %}
{% load humanize %}
{% load compress %}

{% block css %}{{ block.super }}
<link href="{{ STATIC_URL }}css/intrinsic/mturk.css" rel="stylesheet" type="text/css"/>
{% endblock %}

{% block content %}
<div id="mt-top-nohover">
	<div id="mt-instructions">
		<span>Instructions: Click on all points that are on a <u>transparent</u> or <u>mirror</u> surface.  (<span id="image-index">Loading ...</span>)</span>
		<span class="pull-right">
			<button type="button" id='btn-back' class="btn btn-info" disabled="disabled">Back</button>&nbsp;
			<button type="button" id='btn-next' class="btn btn-info" disabled="disabled">Next</button>&nbsp;
			<button type="button" id='btn-submit' class="btn btn-primary" disabled="disabled">Submit</button>
		</span>
	</div>
	<div id="mt-controls">
		<button type="button" id='btn-reset' class="btn btn-controls" disabled="disabled">
			<i class="icon-trash"></i> Reset all points
		</button>&nbsp;
		<button type="button" id='btn-zoom-in' class="btn btn-controls" disabled="disabled">
			<i class="icon-zoom-in"></i> Zoom in
		</button>&nbsp;
		<button type="button" id='btn-zoom-out' class="btn btn-controls" disabled="disabled">
			<i class="icon-zoom-out"></i> Zoom out
		</button>
		<span class="pull-right">
			<a id="btn-instructions" href="#modal-instructions" role="button" class="btn" data-toggle="modal">Instructions</a>&nbsp;
		</span>
	</div>
</div>
<div id="mt-container"></div>
<div id="mt-done" style="display:none; padding: 20px">
	<h1>Done!</h1>
	<p>You can submit now, or press &quot;back&quot; if you made a mistake.</p>
</div>
{% endblock content %}

{% block modals %}{{ block.super }}
{% endblock modals %}

{% block scripts %}{{ block.super }}
{% include "mturk/content_json_script.html" %}

<script type="text/javascript" src="{{ STATIC_URL }}js/d3.v3.min.js"></script>
{% compress js %}
<script type="text/javascript" src="{{ STATIC_URL }}js/array_remove.js"></script>
<script type="text/coffeescript" src="{{ STATIC_URL }}js/common/util.coffee"></script>
<script type="text/coffeescript" src="{{ STATIC_URL }}js/common/modals.coffee"></script>
<script type="text/coffeescript" src="{{ STATIC_URL }}js/common/active_timer.coffee"></script>
<script type="text/coffeescript" src="{{ STATIC_URL }}js/common/svg_photo_zoom_ui.coffee"></script>
<script type="text/coffeescript" src="{{ STATIC_URL }}js/mturk/submit.coffee"></script>
<script type="text/coffeescript" src="{{ STATIC_URL }}js/intrinsic/experiments/intrinsic_opacity_ui.coffee"></script>
<script type="text/coffeescript" src="{{ STATIC_URL }}js/intrinsic/experiments/intrinsic_opacity.coffee"></script>
{% endcompress %}
{% endblock %}
